<template>
	<div :class="mode=='circle'?'tab-list':'tab-list-skew'">
		<div v-for="tab in tabList" :key="tab.id" class="tab-item"
			:class="value === tab.id ? 'tab-selected' : mode=='circle'?'':'not-selected'" :style="{'backgroundSize':`100% 100%`}"
			@click="onTab(tab.id)">
			<image v-if="tab.icon" :src="tab.icon" class="tab-icon" />
			<div>{{ tab.title }}</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			index:{
				type:[String,Number],
				default:0
			},
			tabList: {
				type: Array,
				default: () => []
			},
			mode: {
				type: String,
				default: 'skew'
			}
		},
		data() {
			return {
				value:0
			}
		},
		created(){
			if(this.index){
		        this.value = this.index
			}
		},
		methods: {
			onTab(id) {
				this.value = id
				this.$emit('getId',id)
			}
		}
	}
</script>

<style lang="scss">
	.tab-list {
		display: flex;
		border-radius: 12px 12px 0 0;
		background:#EDF6FF;
		height: 72rpx;
		overflow: hidden;

		.tab-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26px;
			// opacity: 0.65;
			color: #fff;
			position: relative;

		}

		.tab-icon {
			width: 17px;
			height: 17px;
			margin-right: 4px;
		}

		.tab-selected {
			opacity: 1;
			background: #fff;
			border-radius: 12px 12px 0 0;
			box-shadow: 12px 12px 0 0 #ffffff, -12px 12px 0 0 #ffffff;
		}

		.tab-selected::before {
			content: '';
			position: absolute;
			left: -12px;
			bottom: 0;
			width: 12px;
			height: 52px;
			background: #e2e8f8;
			border-radius: 0 0 12px 0;
		}

		.tab-selected::after {
			content: '';
			position: absolute;
			right: -12px;
			bottom: 0;
			width: 12px;
			height: 52px;
			background: #e2e8f8;
			border-radius: 0 0 0 12px;
		}

	}

	.tab-list-skew {
		display: flex;
		position: relative;
		z-index: 2;
		border-radius: 12px 12px 0 0;
		background:#EDF6FF;
		padding-top: 12rpx;
		overflow: hidden;


		.tab-item{
			width: 50%;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 26rpx;
			color: #666;
		}
		.tab-icon {
			width: 17px;
			height: 17px;
			margin-right: 4px;
			margin-top: 1px;
		}
        
		.tab-selected:first-child{
			opacity: 1;
			background:url(https://cdn.yowswl.com/image/admin/2024/01/10/99c8708c6ed04daebd5c1f570024be0dt51o84f1mz.png) no-repeat;
			color: #007DF7;
			font-weight: 650;
			padding-right: 20rpx;
			
		}
		.tab-selected:last-child{
			opacity: 1;
			background:url(https://cdn.yowswl.com/image/admin/2024/01/10/219c9b334a184a18aee73e347c24186dtp4q6rszeo.png) no-repeat;
			color: #007DF7;
			font-weight: 650;
			padding-left: 20rpx;
		}


		// .tab-selected::before {
		// 	content: '';
		// 	position: absolute;
		// 	left: -6px;
		// 	bottom: 0;
		// 	width: 12px;
		// 	height: 52px;
		// 	border-top-left-radius: 12px;
		// 	transform: skewX(-15deg); // 重点
		// }
		// .tab-selected::after {
		// 	content: '';
		// 	position: absolute;
		// 	right: -6px;
		// 	bottom: 0;
		// 	width: 12px;
		// 	height: 52px;
		// 	border-top-right-radius: 12px;
		// 	transform: skewX(15deg); // 重点
			
		// }

		// .not-selected::before {
		// 	content: '';
		// 	position: absolute;
		// 	left: -6px;
		// 	bottom: 0;
		// 	width: 12px;
		// 	height: 52px;
		// 	background:#ff9a82;
		// 	border-bottom-left-radius: 12px;
		// 	transform: skewX(15deg); // 重点
		// }

		// .not-selected::after {
		// 	content: '';
		// 	position: absolute;
		// 	right: -6px;
		// 	bottom: 0;
		// 	width: 12px;
		// 	height: 52px;
		// 	background:#ffa687;
		// 	border-bottom-right-radius: 12px;
		// 	transform: skewX(-15deg); // 重点
		// 	z-index: 1;
		// }
	}
</style>
